<template>
    <el-row v-if="!(/886|60/.test(adData.orderList[0].countryId))" justify="center" align="middle" type="flex"
            style="padding-bottom: 60px" class="contains">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <div class="m-hd">

                <a class="goback" href="javascript:history.go(-1)"><i class="iconfont">&#xe613;</i></a>
                <div class="m-topBar ">
                    <span class="title">{{$t('orderSuccess.orderSuccessTitle')}}</span>
                </div>
            </div>
            <div class="explain">
                <p style="margin-bottom: 38px;" id="order_tips">{{$t('orderSuccess.orderSuccessTip')}}</p>
            </div>
            <div style="text-align: center;">
                <a @click="searchOrder" class="order_quality">{{$t('orderSuccess.orderSuccessSearch')}}</a>
            </div>
            <div class="m-orderItem">
                <div class="reminder_title"><i class="reminder_icon"></i>{{$t('orderSuccess.orderSuccessOtherTitle')}}
                </div>
                <div class="reminder">
                    {{$t('orderSuccess.orderSuccessOtherTip')}}
                </div>
            </div>
        </el-col>
    </el-row>
    <div v-else class="result">
        <h1><img src="https://yuanxun-1256924026.cos.ap-guangzhou.myqcloud.com/icon/success.png"> 提交成功</h1>
        <div class="innner order_div success">
            <div class="order">
                <ul>
                    <li><label>訂單編號：</label><span>{{'YT'+('000000000'+orderList[0].orderId).slice(-10)}}</span></li>
                    <li><label>商品名稱：</label><span>{{orderList[0].productName}}</span></li>
                    <!-- <li><label>選擇顔色【購2件以上需留言顔色，客服幫忙改價】：</label><span>白色</span></li> -->
                    <!-- <li><label>選擇尺寸：</label><span>S</span></li> -->
                    <li>
                        <label>訂單價格：</label>
                        <span><b>NT${{orderList[0].price}}</b></span>
                    </li>
                    <li>
                        <label>訂購數量：</label>
                        <span>{{orderList[0].productNumber}}</span>
                    </li>

                    <li>
                        <label>訂單屬性：</label>
                        <span><b>{{orderDetail(orderList[0].orderDetail)}}</b></span>
                    </li>

                    <li>
                        <label>真實姓名：</label>
                        <span>{{orderList[0].userName}}</span>
                    </li>
                    <li>
                        <label>移動電話：</label>
                        <span>{{orderList[0].phoneNumber}}</span>
                    </li>
                    <li>
                        <label>選擇地區：</label>
                        <span>{{orderList[0].province}} {{orderList[0].city}} {{orderList[0].area}}</span>
                    </li>
                    <li>
                        <label>詳細地址：</label>
                        <span>{{orderList[0].addressDetail}}</span>
                    </li>

                    <li>
                        <label>留言備註：</label>
                        <span>{{orderList[0].userNotes}}</span>
                    </li>
                    <li>
                        <label>支付方式：</label>
                        <span>貨到付款</span>
                    </li>
                </ul>
                <div class="result_info"></div>
            </div>

            <div class="foot">
                <a :href="orderHref"
                   class="foot_btn">返回上頁</a>
                <br>
                <p></p>
            </div>
        </div>
    </div>
</template>

<script>
  import {IP} from '../config/config'
  import {getUrlParam, post} from '../utils/util'

  export default {
    name: "orderSuccess",
    data() {
      return {
        orderList: [],
        orderId: '',
        orderHref: ''
      }
    },
    methods: {
      getOrder() {
        let params = {
          currentPage: 1,
          pageSize: 10,
          orderId: this.orderId
        }
        post('order/getOrders', params).then(response => {
        // post('http://www.zyxmn.com/order/getOrders', params).then(response => {

          if (response && response.code === 'success') {
            if (!response.data || response.data.length === 0) {
              this.orderList = []
            } else {
              this.orderList = response.data
                this.orderHref = `${location.origin}?id=${this.orderList[0].adId}`;
            }
          } else {
            this.orderList = [];
            this.$message.warning(this.$t('search.searchOrderError'))
          }
        })
      },
      orderDetail(str) {
        let resultStr = ''
        let attr = {}
        if (!str) return {}
        for (let [key, item] of Object.entries(JSON.parse(str))) {
          if (key === 'package') continue
          let unique = /(.*?[)(\d*)(])/.test(key) ? key.replace(/(.*?[\[])(\d*)([\]])/, '$2') : 0
          if (attr[unique]) {
            attr[unique].push(item)
          } else {
            attr[unique] = [item]
          }
        }

        for (let [key, item] of Object.entries(JSON.parse(str))) {
          resultStr += item + ','
        }

        return resultStr
      },
      searchOrder() {
        let id = getUrlParam().id
        window.open(IP + 'orderSearch.jsp' + (id ? '?id=' + id : ''), '_self')
      }
    },
    mounted() {
      this.orderId = getUrlParam().id;
      this.orderHref = `${location.origin}?id=${getUrlParam().id}`;
      //orderList[0]
      // this.orderHref = "${location.origin}?id="+orderList[0].adId.toString();
      this.getOrder();
    }
  }
</script>

<style>
    @font-face {
        font-family: 'iconfont';  /* project id 876142 */
        src: url('//at.alicdn.com/t/font_876142_o76auf975op.eot');
        src: url('//at.alicdn.com/t/font_876142_o76auf975op.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_876142_o76auf975op.woff') format('woff'),
        url('//at.alicdn.com/t/font_876142_o76auf975op.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_876142_o76auf975op.svg#iconfont') format('svg');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .m-hd a {
        text-decoration: none;
    }

    .m-hd {
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        height: auto;
        line-height: 22px;
        background: #fff;
    }

    .explain {
        padding: 16px;
        margin-top: 16px;
    }

    .goback {
        display: block;
        float: left;
        height: 30px;
        width: 30px;
        /*background: url(./public/image/back.png)no-repeat center;*/
        background-size: 8px 14px;
        margin-top: 10px;
        font-size: 14px;
        color: #aaa;
        line-height: 2.2;
    }

    .m-topBar {
        position: relative;
        padding: 0 16px;
        display: flex;
        display: -webkit-flex;
    }

    .explain p {
        text-align: center;
        color: #666;
        margin-top: 8px;
        line-height: 20px;
        word-break: break-all;
        font-size: 14px;
    }

    .m-orderItem {
        margin: 15px;
        padding: 17px 15px;
        font-size: 16px;
        color: #212121;
        border: 1px solid #eee;
    }

    .reminder_title {
        text-align: center;
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 10px;
    }

    .reminder {
        font-size: 12px;
    }

    .title {
        width: 200px;
        font-size: 16px;
        text-align: center;
        padding: 12px 0px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: auto;
    }

    .order_quality {
        display: inline-block;
        width: 49%;
        font-size: 12px;
        background-color: #FF5A5F;
        color: #fff;
        line-height: 19px;
        padding: 12px 0;
        border-radius: 5px;
    }

    .result {
        margin: 0 auto;
        min-height: 100%;
        max-width: 800px
    }

    .result ul {
        magin: 0;
        padding: 0;
    }

    .result h1 {
        text-align: center;
        background: #0e9ed3;
        color: #fff;
        padding: 15px;
        font-size: 22px;
        font-weight: normal;
        margin: 0;
    }

    .result h1 img {
        width: 30px;
        vertical-align: middle;
    }

    .result i {
        font-style: normal
    }

    .result .innner {
        position: relative;
        min-height: 100vh;
        overflow: hidden
    }

    .result .order {
        padding: 10px;
        background: #f5f5f5;
        font-size: 14px;
        line-height: 1.8em
    }

    .result ul {
        list-style: none
    }

    .result ul li {
        position: relative
    }

    .result ul label {
        position: absolute;
        left: 0;
        display: inline-block;
        width: 6em;
        text-align: right;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .result ul span {
        display: inline-block;
        padding-left: 6em
    }

    .result .foot {
        text-align: center;
    }

    .result .foot p {
        padding: 10px 0;
    }

    .result .foot_btn {
        margin: 10px;
        display: block;
        font-weight: normal;
        text-align: center;
        cursor: pointer;
        border: 1px solid #f5f5f5;
        white-space: nowrap;
        padding: 15px 0;
        font-size: 16px;
        color: #fff;
        background-color: #f60;
        text-decoration: none;
        outline: 0;
        -webkit-transition: background-color .15s;
        transition: all .3s linear 0s
    }

    .result .foot_btn:hover {
        background-color: #f80
    }

    .result .succtop {
        text-align: center;
        padding: 10px 0;
    }

    .result .succtop span {
        white-space: nowrap;
    }

    .result .succtop .price {
        color: #f60;
    }

    .result .qrcode {
        padding-bottom: 15px;
    }

    .result .qrcode img {
        max-width: 100%;
    }
</style>